<template>
  <document-title :title="title">
    <multipane class="router-search-page">
      <div class="page-search-conditions" :class="{collapse}" :style="searchConditionsStyle">
        <div v-show="!collapse" class="search-content">
          <slot name="search"></slot>
        </div>
        <div class="indicator" @click="toggleCollapse"></div>
      </div>
      <multipane-resizer v-show="!collapse"/>
      <div class="page-search-content" :class="{'page-content-direction-row': direction === 'row'}">
        <slot></slot>
      </div>
    </multipane>
  </document-title>
</template>

<script>
import {mapGetters} from 'vuex';
import {Multipane, MultipaneResizer} from 'vue-multipane';
import DocumentTitle from '../Components/document-title';

export default {
  name: 'router-search-page',
  components: {
    Multipane,
    MultipaneResizer,
    DocumentTitle,
  },
  props: {
    value: {
      type: String,
      default: '360px',
    },
    min: {
      type: String,
      default: '200px',
    },
    max: {
      type: String,
      default: '600px',
    },
    direction: {
      type: String,
      validator: (val) => ['row', 'column'].includes(val),
      default: 'column',
    },
  },
  data() {
    return {
      collapse: false,
    }
  },
  computed: {
    ...mapGetters(['isAdmin', 'isAgent', 'isOrg']),
    title() {
      return this.$route.meta.name || '';
    },
    searchConditionsStyle() {
      let width = this.value;
      let min = this.min;
      if (this.collapse) {
        min = 0;
        width = 0;
      }
      return {
        width: width,
        minWidth: min,
        maxWidth: this.max,
      };
    },
  },
  methods: {
    toggleCollapse() {
      this.collapse = !this.collapse;
    },
  },
};
</script>

<style lang="scss">
@import "../../../assets/style/var";

.router-search-page {
  height: 100%;

  .page-search-conditions {
    display: flex;
    flex-direction: column;
    position: relative;

    .search-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .indicator {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 14px;
      height: 36px;
      opacity: 0.3;
      background-color: #ccc;
      transition-duration: 200ms;
      transition-property: background-color, opacity;
      transition-timing-function: ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 4px 0 0 4px;
      cursor: pointer;

      &:hover {
        opacity: 1;
        background-color: $primary-color;
      }

      &:hover:before {
        transform: rotate(24deg);
      }

      &:hover:after {
        transform: rotate(-24deg);
      }

      &::before,
      &::after {
        content: '';
        display: block;
        position: relative;
        width: 2px;
        height: 10px;
        background-color: #fff;
        transition: all 300ms ease-in-out;
      }

      &::before {
        bottom: -1px;
      }

      &::after {
        top: -1px;
      }
    }

    &.collapse {
      z-index: 2;

      .indicator {
        border-radius: 0 4px 4px 0;
        right: -14px;

        &:hover:before {
          transform: rotate(-24deg);
        }

        &:hover:after {
          transform: rotate(24deg);
        }
      }
    }
  }

  .page-search-content {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: auto;

    &.page-search-content-direction-row {
      flex-direction: row;
    }
  }

  &.layout-v > .multipane-resizer {
    margin: 0;
    left: 0;
    position: relative;

    &.collapse {
      display: none;
    }

    &:before {
      display: block;
      content: "";
      width: 3px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }

    &:hover {
      &:before {
        border-color: #999;
      }
    }
  }
}
</style>
